<template>
    <div class="box">
        <div>
            <div class="title"> 优胜队</div>
            <div id="teamChart"></div>
        </div>
        <div>
            <div class="title">最佳辩手</div>
            <div id="perChart"></div>
        </div>
    </div>

</template>

<script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';


const getTeamChart = () => {
    const chart = echarts.init(document.getElementById('teamChart'))
    const option = {
        xAxis: {
            data: ['正方', '反方',],
            axisLabel: {
                textStyle: {
                    fontSize: '25',
                    color: 'white'
                }
            }
        },
        yAxis: {
            min: 0,
            max: 20,
            axisLabel: {
                textStyle: {
                    fontSize: '15',
                    color: 'white'
                }
            }
        },
        series: [
            {
                type: 'bar',
                data: [0, 0]
            }
        ]
    }
    chart.setOption(option)

    const stop1 = setInterval(() => {
        chart.setOption({
            series: {
                data: updateTeamData(3, 1)
            }
        });
        clearInterval(stop1)
    }, 5000);

    const stop2 = setInterval(() => {
        chart.setOption({
            series: {
                data: updateTeamData(5, 6)
            }
        });
        clearInterval(stop2)
    }, 6000);
    const stop3 = setInterval(() => {
        chart.setOption({
            series: {
                data: updateTeamData(7, 7)
            }
        });
        clearInterval(stop3)
    }, 7000);
    const stop4 = setInterval(() => {
        chart.setOption({
            series: {
                data: updateTeamData(10, 8)
            }
        });
        clearInterval(stop4)
    }, 8000);
    const stop5 = setInterval(() => {
        chart.setOption({
            series: {
                data: updateTeamData(12, 9)
            }
        });
        clearInterval(stop5)
    }, 9000);
    const stop6 = setInterval(() => {
        chart.setOption({
            series: {
                data: updateTeamData(12, 9)
            }
        });
        clearInterval(stop6)
    }, 10000);
    const stop7 = setInterval(() => {
        chart.setOption({
            series: {
                data: updateTeamData(13, 11)
            }
        });
        clearInterval(stop7)
    }, 11000);
    const stop8 = setInterval(() => {
        chart.setOption({
            series: {
                data: updateTeamData(14, 12)
            }
        });
        clearInterval(stop8)
    }, 12000);
    const stop9 = setInterval(() => {
        chart.setOption({
            series: {
                data: updateTeamData(15, 12)
            }
        });
        clearInterval(stop9)
    }, 13000);
}

const updateTeamData = (a, b) => { 
    const data = [
        {
            name: '正方',
            value: a,
            itemStyle: {
                color: '#91cc75',
            },            label: {
                normal: {
                    show: true,//开启显示
                    position: 'top',//柱形上方
                    textStyle: { //数值样式
                        color: '#fff',
                        fontSize: 25
                    }
                }
            },
        },
        {
            name: '反方',
            value: b,
            itemStyle: {
                color: '#5470c6',
            },
            label: {
                normal: {
                    show: true,//开启显示
                    position: 'top',//柱形上方
                    textStyle: { //数值样式
                        color: '#fff',
                        fontSize: 25
                    }
                }
            },
        },
    ]
    return data;
}

const getPerChart = () => {
    const chart = echarts.init(document.getElementById('perChart'))
    const option = {
        xAxis: {
            data: ['一辩', '二辩', '三辩', '四辩', '一辩', '二辩', '三辩', '四辩',],
            axisLabel: {
                textStyle: {
                    fontSize: '15',
                    color: 'white',
                },
                showMinLabel: true,
                showMaxLabel: true,
                hideOverlap: true,
                width: 10,
                overflow: 'breakAll',
            }
        },
        yAxis: {
            min: 0,
            max: 10,
            axisLabel: {
                textStyle: {
                    fontSize: '15',
                    color: 'white'
                }
            }
        },
        legend: {
            data: ['正方', '反方'],
            textStyle: {
                color: 'white'
            }
        },
        series: [
            {
                name: '正方',
                type: 'bar',
                data: [[0, 0], [1, 0], [2, 0], [3, 0]],
                itemStyle: {
                    color: '#91cc75',
                },

                barWidth: '60%',
                barGap :'-100%',
                
            },
            {
                name: '反方',
                type: 'bar',
                data: [[4, 0], [5, 0], [6, 0], [7, 0]],
                itemStyle: {
                    color: '#5470c6',
                },
                barWidth: '60%',
                barGap :'-100%',

            }
        ]
    }
    chart.setOption(option)
    const stop1 = setInterval(() => {
        chart.setOption({
            series: updatePerData(0, 1, 1, 0, 0, 1, 1, 0)

        });
        clearInterval(stop1)
    }, 5000);

    const stop2 = setInterval(() => {
        chart.setOption({
            series: updatePerData(0, 1, 2, 1, 0, 1, 1, 1)

        });
        clearInterval(stop2)
    }, 6000);
    const stop3 = setInterval(() => {
        chart.setOption({
            series: updatePerData(1, 1, 3, 1, 1, 1, 2, 1)

        });
        clearInterval(stop3)
    }, 7000);
    const stop4 = setInterval(() => {
        chart.setOption({
            series: updatePerData(1, 2, 3, 1, 1,2,2,1)

        });
        clearInterval(stop4)
    }, 8000);
    const stop5 = setInterval(() => {
        chart.setOption({
            series: updatePerData(1, 2, 4, 1, 1,3,2,1)

        });
        clearInterval(stop5)
    }, 9000);
    const stop6 = setInterval(() => {
        chart.setOption({
            series: updatePerData(1, 2, 4, 1, 1,3,2,1)

        });
        clearInterval(stop6)
    }, 10000);
    const stop7 = setInterval(() => {
        chart.setOption({
            series: updatePerData(1, 3, 5, 2, 1,4,3,3)

        });
        clearInterval(stop7)
    }, 11000);
    const stop8 = setInterval(() => {
        chart.setOption({
            series: updatePerData(1, 3, 5, 3, 1,4,3,3)

        });
        clearInterval(stop8)
    }, 12000);
    const stop9 = setInterval(() => {
        chart.setOption({
            series: updatePerData(2, 4, 6, 3, 1,5,3,3)
        });
        clearInterval(stop9)
    }, 13000);

}

const updatePerData = (a, s, d, f, g, h, j, k) => {
    const series = [
        {
            name: '正方',
            data: [[0, a], [1, s], [2, d], [3, f]],
            itemStyle: {
                color: '#91cc75'
            },
            label: {
                normal: {
                    show: true,//开启显示
                    position: 'top',//柱形上方
                    textStyle: { //数值样式
                        color: '#fff',
                        fontSize:20
                    }
                }
            },
            barWidth: '60%',
                barGap :'-100%'
        },
        {
            name: '反方',
            data: [[4, g], [5, h], [6, j], [7, k]],
            itemStyle: {
                color: '#5470c6',
            },
            label: {
                normal: {
                    show: true,//开启显示
                    position: 'top',//柱形上方
                    textStyle: { //数值样式
                        color: '#fff',
                        fontSize:20
                    }
                }
            },
            barWidth: '60%',
                barGap :'-100%'
        },
    ]
    return series;
}

onMounted(() => {
    getTeamChart();
    getPerChart();
})

</script>

<style scoped>
.box {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
    
    >div {
        width: 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px;
        background: linear-gradient(145deg, rgba(50, 67, 116, 0.8), rgba(30, 41, 59, 0.8));
        border: 1px solid rgba(102, 126, 234, 0.3);
        border-radius: 15px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 10px rgba(102, 126, 234, 0.2);
        backdrop-filter: blur(8px);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    >div::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, #4a9eff, transparent);
        animation: glowPulse 3s infinite alternate;
    }
    
    >div::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(
            circle,
            rgba(74, 158, 255, 0.2) 1px,
            transparent 1px
        );
        background-size: 20px 20px;
        opacity: 0.4;
        pointer-events: none;
    }
    
    >div:hover {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 126, 234, 0.3);
        transform: translateY(-5px);
    }

    #teamChart,
    #perChart {
        width: 100%;
        height: 670px;
        position: relative;
        z-index: 1;
    }
}

.title {
    margin: 20px auto;
    width: 90%;
    text-align: center;
    font-size: 35px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
    padding: 15px 0;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    text-shadow: 0 2px 10px rgba(102, 126, 234, 0.5);
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 2;
}

.title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #4a9eff, transparent);
    animation: glowPulse 3s infinite alternate;
}

.title::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(
        circle,
        rgba(74, 158, 255, 0.2) 1px,
        transparent 1px
    );
    background-size: 15px 15px;
    opacity: 0.4;
    pointer-events: none;
}

.title:hover {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

@keyframes glowPulse {
    0% {
        background-position: -100% 0;
        opacity: 0.6;
    }
    100% {
        background-position: 100% 0;
        opacity: 1;
    }
}
</style>